<route lang="json5">
    {
      style: {
        navigationStyle: 'custom',
        enablePullDownRefresh: false,
      },
    }
    </route>

<template>
    <page-meta :root-font-size="setting.rootFontSize"></page-meta>
    <view class="container">
        <view class="tabbar">
            <wd-navbar style="min-height: 100rpx" :title="state.title" :bordered="false" safeAreaInsetTop>
                <template #left>
                    <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
                </template>
            </wd-navbar>
            <view class="tabs" v-if="state.businessTypeList.length">
                <scroll-view scroll-x scroll-with-animation
                    :scroll-into-view="'i' + (current_index > 0 ? current_index - 1 : current_index)">
                    <view class="tabs" :class="{ between: state.businessTypeList.length > 2 }">
                        <view v-for="(item, index) in state.businessTypeList" :class="[
                            'item',
                            'i' + index,
                            item.business_type === state.listParams.business_type ? 'on' : '',
                        ]" :id="'i' + index" :key="item.value" @click="onCheckBusiness(item)">{{ item.name }}</view>
                    </view>
                </scroll-view>
            </view>
        </view>
        <scroll-view class="scrollView" :scroll-with-animation="state.useAnimation" scroll-y :upper-threshold="50"
            @scrolltolower="loadData">
            <view class="list" id="list">
                <view class="item" v-for="(item, index) in state.dataList" :key="item.id" :id="'item-' + item.id">
                    <view class="time">
                        <text>{{ formatTime(item.pushDate) }}</text>
                    </view>
                    <view class="flex">
                        <view class="avatar">
                            <image class="img" src="/static/logo2.png" mode="aspectFit"></image>
                        </view>
                        <view class="mian">
                            <view class="tip">
                                <text class="text">消息推送</text>
                            </view>
                            <view class="card">
                                <view class="content">
                                    <img class="image" mode="aspectFill" :src="item.picUrl"
                                        @click="previewImage(item.picUrl)" />
                                    <view class="title">
                                        <text>{{ item.content }}</text>
                                    </view>
                                </view>

                            </view>
                        </view>
                    </view>
                </view>

            </view>
            <wd-loadmore :state="state.loadStatus" finishedText="没有更多了" @reload="getData"></wd-loadmore>
        </scroll-view>
        <!-- <wd-loadmore :state="state.loadStatus" finishedText="没有更多了" @reload="getData"></wd-loadmore> -->
    </view>
</template>

<script lang="ts" setup>
import { useSetting } from '@/stores/setting';
import { useMenu } from '@/stores/menu';
import { request } from '@/utils/request';
import dayjs from 'dayjs'
import calendar from 'dayjs/plugin/calendar'
import "dayjs/locale/zh-cn"
dayjs.locale('zh-cn')
dayjs.extend(calendar)

const menu = useMenu();
const setting = useSetting();
const selectSchemeShow = ref(false);

const state = reactive({
    title: "推送报表",
    loadStatus: "loadend",
    businessTypeList: [],
    listParams: {
        current: 1,
        size: 3,
        business_type: "",
        module: "",
    },
    dataList: [],
    useAnimation: false,
    scrollIntoViewId: "",
    lastListHeight: 0,
    scrollHeight: 0,
    touch: {
        startX: 0,
        endY: 0
    },
})

const goBack = () => {
    uni.navigateBack();
};

const current_index = computed(() => {
    return state.state.businessTypeList.findIndex((item) => item.business_type === state.listParams.business_type) || 0
})

onLoad((options) => {
    state.listParams = { ...state.listParams, ...options };
    if (options.title) {
        state.title = options.title
    }
    getData();
    // if (!menu.menuList || menu.menuList.length === 0) {
    //     getAppMenu()
    //         .then((res) => {
    //             state.$store.commit("setMenuList", res.data);
    //         })
    //         .catch((e) => {
    //             console.log(e);
    //         });
    // }
    // this.query = uni.createSelectorQuery().in(this);
});


const formatTime = (val) => {
    return dayjs(val).locale('zh-cn').calendar(null, {
        sameDay: 'HH:mm',
        lastDay: '昨天 HH:mm',
        // nextDay: '明天 HH:mm',
        lastWeek: 'dddd HH:mm',
        sameYear: 'M月D日 HH:mm',
        // sameElse: 'YY年M月D日 hh:mm',
        sameElse: function (now) {
            const year = this.year()
            const month = this.month() + 1
            const week = this.day()
            const day = this.date()
            const hour = this.hour()
            const minute = this.minute()
            if (dayjs(now).year() === year) {
                return `${month}月${day}日 ${hour}:${minute >= 10 ? minute : '0' + minute}`
            } else {
                return `${year}年${month}月${day}日 ${hour}:${minute >= 10 ? minute : '0' + minute}`
            }
        }
    })
}
const upxToPx = (value) => {
    return uni.upx2px(value)
}
const loadData = () => {
    if (state.loadStatus === "loadend") {
        state.listParams.current++;
        getData();
    }
}
const touchStart = (e) => {
    state.touch.startX = e.touches[0].clientX
}
const touchEnd = (e) => {
    let flag = true
    let current = state.state.businessTypeList.findIndex(item => item.business_type === state.listParams.business_type)
    state.touch.endX = e.changedTouches[0].clientX
    const { startX, endX } = state.touch
    if (startX - endX > 80) {
        ++current
        flag = true
    } else if (startX - endX < -80) {
        --current
        flag = true
    } else {
        flag = false
    }

    if (flag) {
        const total = state.state.businessTypeList.length
        if (current >= 0) {
            current = current % total
        } else {
            current = total - Math.abs(current % - total)
        }
        state.listParams.business_type = state.state.businessTypeList[current].business_type
        state.listParams.page = 1
        getData()
    }

}

const getData = () => {
    state.loadStatus = "loading";
    if (state.listParams.current === 1) {
        state.dataList = [];
    }
    request({
        url: "/pm/report/pageApp",
        methods: "get",
        data: state.listParams,
        needToken: true,
        type: "form",
    })
        .then((res) => {
            if (res.code !== 0) {
                state.loadStatus = "loaderror";
                return;
            }
            if (res.data.records.length === state.listParams.size) {
                state.loadStatus = "loadend";
            } else {
                state.loadStatus = "nomore";
            }
            state.useAnimation = false
            state.dataList.push(...res.data.records);
        })
        .catch((err) => {
            state.loadStatus = "loaderror";
            uni.showToast({
                title: err.msg || err.message || err.error || "请求失败",
                icon: "none",
            });
        })
        .finally(() => {
            uni.stopPullDownRefresh();
        });
}
const previewImage = (url) => {
    uni.navigateTo({
        url: `/pages/push-report/preview?img=${encodeURIComponent(url)}`,
        animationType: "fade-in"
    })

}
</script>
<style lang="scss" scoped>
.container {


    .tabbar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        background: linear-gradient(45deg, #0081ff, #1ab3f5);
        z-index: 9999;
    }
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.space-between {
    justify-content: space-between;
}

.tabs {
    padding: 0 24rpx;
    // display: flex;
    // justify-content: space-between;
    margin-top: 15rpx;
    white-space: nowrap;

    &.between {
        display: flex;
        justify-content: space-between;
    }

    .item {
        display: inline-block;
        padding: 15rpx 24rpx;
        opacity: 0.5;
        text-align: center;
        transition: all 0.3s;
        position: relative;

        &.on {
            opacity: 1;

            &:after {
                content: "";
                width: 12rpx;
                height: 12rpx;
                border-radius: 50%;
                background: #f1f1f1;
                position: absolute;
                bottom: -8rpx;
                left: 50%;
                transform: translate(-50%);
            }
        }
    }
}

.scrollView {
    height: 100vh;
    padding: 0 20rpx;
    padding-bottom: 150rpx;
    // padding: 32rpx;
    background-color: #f3f3f3;
    transform: rotate(180deg);
    box-sizing: border-box;

    .list {
        >.item {
            transform: rotate(180deg);

            .avatar {
                width: 80rpx;
                height: 80rpx;
                border-radius: 8rpx;
                margin-right: 18rpx;
                overflow: hidden;
                background-color: #fff;

                .img {
                    width: 100%;
                    height: 100%;
                }
            }

            .mian {
                flex: 1;

                .tip {
                    margin-bottom: 6rpx;

                    >.text {
                        font-size: 26rpx;
                        color: #3975c6;
                    }
                }
            }

            .time {
                padding: 18rpx;
                text-align: center;
                font-size: 26rpx;
                color: #999;
            }
        }
    }

    .wd-loadmore {
        transform: rotate(180deg);
    }

    .card {
        margin-bottom: 32rpx;
        margin-right: 48rpx;
        border-radius: 14rpx;
        overflow: hidden;
        box-shadow: 0 6rpx 28rpx 0 #e0e0e0;
        background-color: #fff;
        border: 1rpx solid #f3f3f3;

        .content {
            .image {
                width: 100%;
                // height: 30vw;
                min-height: 15vw;
                max-height: 40vw;
                object-fit: cover;
            }

            .title {
                padding: 0 24rpx;
                margin: 20rpx 0;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                font-size: 32rpx;
                word-break: break-word;
                // font-weight: bold;
            }
        }

        .footer {
            padding: 24rpx;
            position: relative;
            line-height: 1;
            font-size: 26rpx;
            color: #666;

            &:after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                height: 1rpx;
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
                background-color: #dedede;
            }

            .time {
                margin-left: 12rpx;
            }
        }
    }
}
</style>
